<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据可视化项目</title>
    <link rel="stylesheet" href="fonts/icomoon.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/echarts.min.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/myMap.js"></script>
  </head>

  <body>
 
    <div class="viewport">
      <div class="column">
        <!-- 概览区域制作 -->
        <div class="panel overview">
          <div class="inner">
            <ul>
              <li>
                <h4>725</h4>
                <span>
                  <i class="icon-dot" style="color: #006cff"></i>
                 普通本科
                </span>
              </li>
              <li class="item">
                <h4>631</h4>
                <span>
                  <i class="icon-dot" style="color: #6acca3"></i>
                  专科
                </span>
              </li>
              <li>
                <h4>371</h4>
                <span>
                  <i class="icon-dot" style="color: #6acca3"></i>
                 重点本科
                </span>
              </li>
              <li>
                <h4>194</h4>
                <span>
                  <i class="icon-dot" style="color: #ed3f35"></i>
                  院校
                </span>
              </li>
            </ul>
          </div>
        </div>
        
        <div class="panel monitor">
          <div class="inner">
            <div class="tabs">
              <a href="javascript:;" class="active">本科</a>
              <a href="javascript:;">985,211，普通本科</a>
            </div>
            <div class="content" style="display: block">
              <div class="head">
                <span class="col">学校名称</span>
                <span class="col">招生电话</span>
                <span class="col">高校地区</span>
              </div>
              <div class="marquee-view">
                <div class="marquee">
                  <div class="row">
                    <span class="col">北京大学</span>
                    <span class="col">010-62751407,010-62554332</span>
                    <span class="col">北京海淀区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">云南大学</span>
                    <span class="col">0871-65033819,0871-65032173</span>
                    <span class="col">云南呈贡区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">长安大学</span>
                    <span class="col">029-62334004,029-62334813</span>
                    <span class="col">陕西</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">湖南大学 </span>
                    <span class="col">0731-8823560,0731-88823578</span>
                    <span class="col">湖南岳麓区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">大连艺术学院 </span>
                    <span class="col">0411-39256115，0411-39256116</span>
                    <span class="col">辽宁</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">内蒙古大学</span>
                    <span class="col">0471-4993105,0471-4993164</span>
                    <span class="col">内蒙古赛罕区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">西北大学</span>
                    <span class="col">029-68302211</span>
                    <span class="col">陕西碑林区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">辽宁大学 </span>
                    <span class="col">021-62202299</span>
                    <span class="col">辽宁皇姑区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">武汉大学</span>
                    <span class="col">027-68754231</span>
                    <span class="col">湖北武昌区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">河北大学</span>
                    <span class="col"> 0312-5079698</span>
                    <span class="col">河北</span>
                    <span class="icon-dot"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="content">
              <div class="head">
                <span class="col">学校名称</span>
                <span class="col">招生电话</span>
                <span class="col">高校地区</span>
              </div>
              <div class="marquee-view">
                <div class="marquee">
                  <div class="row">
                    <span class="col">北京大学</span>
                    <span class="col">010-62751407,010-62554332</span>
                    <span class="col">北京海淀区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">云南大学</span>
                    <span class="col">0871-65033819,0871-65032173</span>
                    <span class="col">云南呈贡区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">长安大学</span>
                    <span class="col">029-62334004,029-62334813</span>
                    <span class="col">陕西</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">湖南大学 </span>
                    <span class="col">0731-8823560,0731-88823578</span>
                    <span class="col">湖南岳麓区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">大连艺术学院 </span>
                    <span class="col">0411-39256115，0411-39256116</span>
                    <span class="col">辽宁</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">内蒙古大学</span>
                    <span class="col">0471-4993105,0471-4993164</span>
                    <span class="col">内蒙古赛罕区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">西北大学</span>
                    <span class="col">029-68302211</span>
                    <span class="col">陕西碑林区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">辽宁大学 </span>
                    <span class="col">021-62202299</span>
                    <span class="col">辽宁皇姑区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">武汉大学</span>
                    <span class="col">027-68754231</span>
                    <span class="col">湖北武昌区</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">河北大学</span>
                    <span class="col"> 0312-5079698</span>
                    <span class="col">河北</span>
                    <span class="icon-dot"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="point panel">
          <div class="inner">
            <h3>高校分布地区（）</h3>
            <div class="chart">
              <div class="pie"></div>
              <div class="data">
                <div class="item">
                  <h4>四川</h4>
                  <span>
                    <i class="icon-dot" style="color: #ed3f35"></i>
                    高校分布最多
                  </span>
                </div>
                <div class="item">
                  <h4>甘肃</h4>
                  <span>
                    <i class="icon-dot" style="color: #eacf19"></i>
                    高校分布最少
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <!-- 地图模块 -->
        <div class="map">
          <h3>
            <span class="icon-cube"></span>
            全国高校省会城市分布
          </h3>
          <div class="chart">
            <div class="geo"></div>
          </div>
        </div>
        <!-- 用户统计模块 -->
        <div class="users panel">
          <div class="inner">
            <h3>各省的学校数量</h3>
            <div class="chart">
              <div class="bar"></div>
              <div class="data">
                <div class="item">
                  <h4>2034</h4>
                  <span>
                    <i class="icon-dot" style="color: #ed3f35"></i>
                    学校总量
                  </span>
                </div>
                <div class="item">
                  <h4>100</h4>
                  <span>
                    <i class="icon-dot" style="color: #eacf19"></i>
                    北京学校
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <!-- 订单 -->
        <div class="order panel">
          <div class="inner">
            <!-- 筛选 -->
            <div class="filter">
              <a href="javascript:;" class="active">本科</a>
              <a href="javascript:;">专科</a>
              <a href="javascript:;">985</a>
              <a href="javascript:;">211</a>
            </div>
            <!-- 数据 -->
            <div class="data">
              <div class="item">
                <h4>371</h4>
                <span>
                  <i class="icon-dot" style="color: #ed3f35"></i>
                  重点学校
                </span>
              </div>
              <div class="item">
                <h4>2034</h4>
                <span>
                  <i class="icon-dot" style="color: #eacf19"></i>
                  学校数据
                </span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="sales panel">
          <div class="inner">
            <div class="caption">
              <h3>高校类型</h3>
              <a href="javascript:;" class="active" data-type="year">理工</a>
              <a href="javascript:;" data-type="quarter">财经</a>
              <a href="javascript:;" data-type="month">医药</a>
              <a href="javascript:;" data-type="week">综合</a>
            </div>
            <div class="chart">
              <div class="label"></div>
              <div class="line"></div>
            </div>
          </div>
        </div>

        <div class="wrap">
          <div class="channel panel">
            <div class="inner">
              <h3>高校类型雷达图</h3>
              <div class="data">
                <div class="radar"></div>
              </div>
            </div>
          </div>
          
          <div class="quarter panel">
            <div class="inner">
              <h3>本科/专科的比重</h3>
              <div class="chart">
                <div class="box">
                  <div class="gauge"></div>
                  <div class="label">55<small> %</small></div>
                </div>
                <div class="data">
                  <div class="item">
                    <h4>1356</h4>
                    <span>
                      <i class="icon-dot" style="color: #6acca3"></i>
                      本科55%
                    </span>
                  </div>
                  <div class="item">
                    <h4>100%</h4>
                    <span>
                      <i class="icon-dot" style="color: #ed3f35"></i>
                      专科45%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 全国热榜模块制作 -->
        <div class="top panel">
          <div class="inner">
            <div class="all">
              <h3>重点高校</h3>
              <ul>
                <li>
                  <i class="icon-cup1" style="color: #d93f36"></i>
                  北京大学
                </li>
                <li>
                  <i class="icon-cup2" style="color: #68d8fe"></i>
                  武汉大学
                </li>
                <li>
                  <i class="icon-cup3" style="color: #4c9bfd"></i>
                  北京人民大学
                </li>
              </ul>
            </div>
            <div class="province">
              <h3>向往城市 <i class="date">// 北京 //</i></h3>
              <div class="data">
                <ul class="sup">
                  <!-- <li>
                    <span>北京</span>
                    <span>25,179 <s class="icon-up"></s></span>
                  </li> -->
                </ul>
                <ul class="sub">
                  <!-- <li><span></span><span> <s class="icon-up"></s></span></li> -->
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/china.js"></script>
  </body>
</html>
